<template>
  <div class="news">
    <QxHead @showModal="showMenuModal"></QxHead>
    <Menu :showModal="showModalFlag" @handleHideModal="handleHideModal" @getMenuList="getMenuList"/>
    <div class="news_center_img">
      <img :src="bannerImage" alt="">
    </div>
    <tab active-color="#346DB1" custom-bar-width="1.15rem">
      <tab-item @on-item-click="handler('集团新闻')" :selected="activeType == 'news'">集团新闻</tab-item>
      <tab-item @on-item-click="handler('产业动态')" :selected="activeType == 'group'">产业动态</tab-item>
    </tab>
    <ul class="news_list">
      <li class="flex-box-align" v-for="(item, index) in list" :key="index" @click="$router.push('/newsDetail?id='+item.id)">
        <div :style="{backgroundImage: 'url(https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.cover_image+')'}"></div>
        <div class="news_info">
          <p class="news_title flex">{{item.title}}</p>
          <p class="news_time">{{_getTime(item.create_time)}}</p>
        </div>
      </li>
    </ul>
    <div class="btn-load" @click="handleMore" v-if="loadMoreFlag">查看更多</div>
    <load-more v-else :show-loading="false" tip="暂无数据" background-color="#fbf9fe"></load-more>

    <BottomInfo lang="zh"/>
  </div>
</template>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?0c6b7133f8b076c80f30ef205bddbfab";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
  import { Tab, TabItem, LoadMore } from 'vux'
  import BottomInfo from "./common/bottomInfo";
  import QxHead from "./common/qxHead";
  import Menu from "./common/menu";

  let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js")

  export default {
    components: {
      Tab, TabItem, LoadMore,
      BottomInfo,
      QxHead,
      Menu
    },
    data() {
      return {
        loadMoreFlag: true,
        activeType: "",
        showModalFlag: false,
        selectedType: "集团新闻",
        img: 'url('+require("../images/hope_bg.png")+')',
        bannerImage: "",
        list: [],
        pageIndex: 1
      }
    },
    mounted() {
      this.activeType = this.$route.query.type
      this.selectedType = this.activeType == 'news' ? '集团新闻' : '产业动态'
      this.getNewsList(this.selectedType, this.pageIndex)
    },
    methods: {
      getMenuList(data) {
        data.map( item => {
          if (item.link == location.pathname + location.search) {
            this.bannerImage = "https://qiaoxin.oss-cn-shenzhen.aliyuncs.com"+item.banner_image
          }
        })
      },
      showMenuModal(bool) {
        this.showModalFlag = bool
      },
      handleHideModal(bool) {
        this.showModalFlag = bool
      },
      handler(type) {
        this.list= []
        this.selectedType = type
        this.pageIndex = 1
        this.loadMoreFlag = true
        this.getNewsList(type, this.pageIndex)
      },
      getNewsList(type, index) {
        let url = CONSTANT.URL.getNewsList;
        common.requestGetAjax(url, {}, {type: type, page_index: index, page_size: 5}, (res) => {
          if (res.code == 200) {
            this.list = this.list.concat(res.data.data)
            if (res.data.data.length == 0 || res.data.data.length < 5) {
              this.loadMoreFlag = false
            }
          }
        })
      },
      _getTime(stamp) {
        return common.timeStampToDate(stamp)
      },
      handleMore() {
        this.pageIndex++
        this.getNewsList(this.selectedType, this.pageIndex)
      }
    }
  };
</script>
<style lang="less">
  .news {
    /*padding-bottom: 1.31rem;*/
    .vux-tab-wrap {
      padding-top: .7rem;
      margin-top: .28rem;
      background-color: #fff;
      .vux-tab-container {
        height: .7rem;
        .vux-tab {
          height: .7rem;
          .vux-tab-item {
            line-height: .5rem;
            position: relative;
            font-size: .29rem;
            &:first-child::after {
              content: "";
              width: 1px;
              height: .26rem;
              background-color: #ccc;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
    .vux-tab-ink-bar {
      right: 50%;
    }
    .news_center_img {
      /*padding-bottom: .28rem;*/
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .news_list {
      padding: .28rem .37rem .28rem .28rem;
      background-color: #f3f5f8;
      li {
        margin-bottom: .28rem;
        div {
          &:first-child {
            -webkit-background-size: cover;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 1.99rem;
            height: 1.32rem;
            vertical-align: middle;
          }
          &:last-child {
            margin-left: .22rem;
            /*margin-top: .14rem;*/
            .news_title {
              width: 4.65rem;
              margin-bottom: .19rem;
              font-size: .29rem;
              line-height: .42rem;
              white-space: normal;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              word-wrap: break-word;
              word-break: break-all;
              overflow: hidden;
              height: .75rem;
            }
            .news_time {
              font-size: .21rem;
              color: #aaa;
            }
          }
        }
      }
    }

    .btn-load {
      text-align: center;
      padding: .2rem 0;
      font-size: .27rem;
    }
  }
</style>

